require('./Imgup.styl');


import {Boxs, Dialog, Field, Grid, Group} from 'saltui';
import Icon from 'salt-icon'

const HBox = Boxs.HBox;
const Box = Boxs.Box;

class Imgup extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showConfirm: false,
    }
  }

  //打开选择图片,上传图片后执行
  onImagesSelectClick() {
    let t = this;

    //t.props.onImgSelect({index: t.props.index, images: ['1234']});

    if (!this.props.readOnly) {
      dd.biz.util.uploadImage({
        multiple: true, //是否多选，默认false
        max: 10, //最多可选个数
        onSuccess: function (result) {
          t.props.onImgSelect({index: t.props.index, images: result});
        },
        onFail: function (err) {

          alert('调用钉钉上传图片接口错误:' + JSON.stringify(err));
        }
      })
    }
  }

  handleConfirm(obj) {
    let t = this;

    Dialog.confirm({
      title: '提示',
      locale: 'zh_cn',
      content: '是否删除图片?',
      onConfirm() {
        t.props.onImgDel(obj);
      },
      onCancel() {
        console.log('confirm cancel');
      }
    });

  }

  render() {
    let t = this;
    let imgs = [];
    let urls = [];
    this.props.images && this.props.images.forEach((item, index) => {
      urls.push(item.imgUrl);
    });
    this.props.images && this.props.images.forEach((item, index) => {
      imgs.push(
        <Box>
          <img src={item.imgUrl} width="70" height="70" onClick={() => {
            dd.biz.util.previewImage({
              urls: urls,//图片地址列表
              current: item.imgUrl,//当前显示的图片链接
              onSuccess: function (result) {
                console.log(result);
              },
              onFail: function () {
                alert('钉钉查看图片接口失败!')
              }
            })
          }}/>
          {!this.props.readOnly &&
          <span className="jcjl-i-list-cricle" onClick={(e) => {
            this.handleConfirm({index: t.props.index, imageIndex: index})
          }}>
                        <Icon name="cross-round" fill="#f04631" height="25"
                              width="25"/></span>}
        </Box>
      )
    });


    return (
      <div className="imgup">


        <HBox>
          <Box onClick={this.onImagesSelectClick.bind(this)} flex={1}><Field layout="h"
                                                                             label="图片"/></Box>
          {!this.props.readOnly &&
          <Box onClick={this.onImagesSelectClick.bind(this)}
               style={{width: '50px', textAlign: 'right', marginTop: '8px', marginRight: '5px'}}>
            <Icon name="angle-right" fill="#ccc" width={28} height={28}/>
          </Box>
          }
        </HBox>


        {imgs.length > 0 && <Group.List>
          <Grid col={4} square={true} noLine={true}>
            {imgs}
          </Grid></Group.List>
        }


      </div>
    );
  }
}

Imgup.contextTypes = {
  images: React.PropTypes.array,
  readOnly: React.PropTypes.bool,
  onImgSelect: React.PropTypes.func,
  onImgDel: React.PropTypes.func,
  index: React.PropTypes.object,
}
;

module.exports = Imgup;
